<template>
  <div>
    <Header>
      <el-button size="small" type="primary" @click="$emit('out')"
        >返回管理商品</el-button
      >
      <el-button size="small" type="primary" @click="add('', 'all')"
        >批量添加</el-button
      >

      <div style="margin-top:10px">
        <el-cascader
          v-model="goodsType"
          :options="options"
          :props="defaultProps"
          size="small"
          clearable
          @change="getList"
        ></el-cascader>
        &nbsp;&nbsp;
        <el-checkbox v-model="checked" @change="getList"
          >只显示上架商品</el-checkbox
        >
        <div class="heads-right" style="width:30%;">
          <el-input v-model="searchName" placeholder="请输入名称" size="small">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getList"
            ></el-button>
          </el-input>
        </div>
      </div>
    </Header>

    <Main
      :data="listData"
      :footer-lock="totals > 10"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        :selectable="checkSelectable"
      >
      </el-table-column>
      <el-table-column
        label="商品名称"
        align="center"
        property="goods_name"
      ></el-table-column>
      <el-table-column label="商品封面" align="center">
        <template slot-scope="scope">
          <img
            :src="
              $store.state.qiniu +
                scope.row.goods_cover.split(',')[0] +
                $store.state.imgRotate
            "
            width="80px"
          />
        </template>
      </el-table-column>
      <el-table-column label="销售价格" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.low_goods_price == scope.row.up_goods_price"
            >￥{{ scope.row.low_goods_price }}</span
          >
          <span v-else
            >￥{{ scope.row.low_goods_price }} - ￥{{
              scope.row.up_goods_price
            }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="成本价格" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.low_cost == scope.row.up_cost"
            >￥{{ scope.row.low_cost }}</span
          >
          <span v-else
            >￥{{ scope.row.low_cost }} - ￥{{ scope.row.up_cost }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        label="商品库存"
        align="center"
        property="goods_stock"
      ></el-table-column>
      <el-table-column
        label="实际销量"
        align="center"
        property="goods_salecount"
      ></el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 'normal'" style="color:#67C23A;">
            上架
          </span>
          <span v-else style="color:#F56C6C;">
            下架
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="250"
        class-name="tableoperation"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.is_distribute == 0"
            size="mini"
            type="text"
            @click="add(scope.row, 'single')"
          >
            添加
          </el-button>
          <el-button
            v-if="scope.row.is_distribute == 1"
            size="mini"
            type="text"
            disabled
          >
            已添加
          </el-button>
        </template>
      </el-table-column>
    </Main>

    <Footer :total="totals">
      <el-pagination
        :page-size="10"
        layout="prev, pager, next"
        :total="totals"
        @current-change="changes"
      >
      </el-pagination>
    </Footer>

    <shop-msg
      :visible="visible"
      :form-data="formData"
      :types="'add'"
      @dialogOut="dialogOut"
    />
  </div>
</template>
<script>
import { GOODSLISTShop, GETLISTShopClass } from "@/service/shop";

export default {
  components: {
    shopMsg: () => import("./shopMsg")
  },
  data() {
    return {
      listData: [],
      checked: true,
      options: [],
      goodsType: "",
      defaultProps: {
        value: "type_id",
        children: "second",
        label: "type_name",
        checkStrictly: true
      },
      totals: 0,
      pages: 0,
      searchName: "",
      Arr: [],
      formData: {},
      visible: false
    };
  },
  created() {
    this.getList();
    this.getCommodityClass();
  },
  methods: {
    checkSelectable(row) {
      return row.is_distribute === 0;
    },
    handleSelectionChange(e) {
      this.Arr = e;
    },
    dialogOut() {
      this.visible = false;
      this.getList();
    },
    add(e, type) {
      let form = {};
      if (type === "single") {
        form.goods_ids = e.goods_id;
        form.goods_name = e.goods_name;
        form.lprice =
          e.low_goods_price === e.up_goods_price
            ? e.low_goods_price
            : `${e.low_goods_price} - ${e.up_goods_price}`;
        form.sprice =
          e.low_cost === e.up_cost
            ? e.low_cost
            : `${e.low_cost} - ${e.up_cost}`;
        form.sort = e.sort;
      } else {
        let arr = [];
        this.Arr.forEach(ele => {
          arr.push(ele.goods_id);
        });
        form.goods_ids = arr.join(",");
      }
      form.soft = type;
      this.formData = form;
      this.visible = true;
    },
    async getCommodityClass() {
      await GETLISTShopClass().then(({ code, data }) => {
        if (code === 200) {
          this.options = data;
        }
      });
    },
    async getList() {
      await GOODSLISTShop({
        page: this.pages,
        pageshow: 10,
        flag: "exclusive",
        status: this.checked ? "normal" : "all",
        goodsType: this.goodsType[this.goodsType.length - 1],
        search: this.searchName
      }).then(({ code, data, msg }) => {
        if (code === 200) {
          this.totals = data.length;
          this.listData = data.list;
        } else {
          this.totals = 0;
          this.listData = [];
          this.$message.error(msg);
        }
      });
    },
    changes(page) {
      this.pages = page;
      this.getList();
    }
  }
};
</script>
